<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的初级验证</title>
</head>
<body>

<form action="result.html" method="get">

    <!-- 表单的初级验证
     placeholder 提示信息
     required 非空判断
     pattern 正则表达式
     -->
    <p>
        用户名：<input type="text" name="username" value="凯德六号" size="30" maxlength="10" readonly>
    </p>

    <p>
        <!--required必须要填写这个字段-->
        密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" size="30" required>
    </p>

    <p>心情：
        <input type="radio" name="mood" value="happy" checked>快乐
        <input type="radio" name="mood" value="unhappy">不快乐
        <input type="radio" name="mood" value="sad" disabled>悲伤
    </p>

    <!--搜索框 search-->
    <!--placeholder="请输入要搜索的游戏" 默认提示，告诉用户应该这么做-->
    <!--required必须要填写这个字段-->
    <p>搜索游戏：
        <input type="search" name="search games" id="mark2" placeholder="请输入要搜索的游戏" required>
    </p>

    <!-- 增强鼠标可用性 -->
    <p>
        <label for="mark1">点击，鼠标定位到如下文本框内</label>
        <input type="text" id="mark1">
    </p>

    <p>
        <label for="mark2">点击，鼠标定位到搜索游戏框</label>
    </p>

    <p>
        <!--pattern:正则表达式-->
        手机号码：<input type="text" name="telephone number" required pattern="^1[358]\d{9}">
    </p>

    <p>
        <input type="submit" name="submit"  value="提交">
        <input type="reset" name="reset"  value="重置">
    </p>

</form>

</body>
</html>